<template>
  <div class="building-container">
    <div class="search-container">
      <el-button type="primary" @click="fnn">新增登记</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table :data="list" style="width: 100%">
        <!-- 表示多选 -->
        <!-- <el-table-column width="80" /> -->
        <el-table-column type="index" label="序号" />
        <!-- <el-table-column label="病人名字" prop="patientName" width="180" /> -->
        <el-table-column label="姓名" prop="patientName" />
        <el-table-column label="入院日期" :formatter="fn" />
        <el-table-column label="住院科室号" prop="departmentName" />
        <el-table-column label="床位号" prop="bed_number" />
        <el-table-column label="病人就诊号" prop="patientID" />
        <el-table-column label="结算状态" :formatter="fn2" />
      </el-table>

      <el-dialog title="添加登记表" :visible="flag" @close="handleClose">
        <div style="display: flex; justify-content: center;">
          <el-form ref="form" style="width: 400px;" :rules="rules" :model="form">
            <el-form-item label="姓名" prop="patientName">
              <el-input v-model="form.patientName" :disabled="true" />
            </el-form-item>
            <el-form-item label="入院日期" prop="admission_date">
              <el-input v-model="form.admission_date" :disabled="true" />
            </el-form-item>
            <el-form-item label="科室" prop="departmentName">
              <!-- 使用 el-select 替代 el-input，并通过 v-model 绑定选中的值 -->
              <el-select v-model="form.departmentName" placeholder="请选择所在科室">
                <!-- 使用 el-option 标签循环渲染下拉框选项 -->
                <el-option v-for="department in departmentOptions" :key="department.departmentID"
                  :label="department.departmentName" :value="department.departmentName" />
              </el-select> </el-form-item>
            <el-form-item label="床位号" prop="bed_number">
              <el-input v-model="form.bed_number" />
            </el-form-item>

            <div class="box">
              <el-form-item>
                <el-button @click="flag = false">取消</el-button>
                <el-button type="primary" @click="confirm">确认</el-button>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </el-dialog>

    </div>

  </div>
</template>

<script>
import { getPatientListAPI, addPatientAPI, } from '@/api/patient'
import { getDepartmentListAPI } from '@/api/admin'
export default {
  bed_number: 'doctor',
  data() {
    return {
      departmentOptions: [],
      flag: false,
      total: 0,
      list: [],
      formattedCurrentTime: '',
      params: {
        page: 1,
        pageSize: 10,
        Flag: ''
      },
      form: {
        patientName: '',
        admission_date: '',
        departmentName: '',
        bed_number: ''

      },
      rules: {
        patientName: [
          { required: true, message: '必须填写', trigger: 'blur' }
        ],
        admission_date: [
          { required: true, message: '必须填写', trigger: 'blur' }
        ],
        departmentName: [
          { required: true, message: '必须填写', trigger: 'blur' }
        ],

        bed_number: [
          { required: true, message: '必须填写', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    //页面加载后请求数据
    this.getList()
    this.fetchDepartmentOptions()
    this.getFormattedCurrentTime()
    setInterval(this.getFormattedCurrentTime, 1000);


  },
  methods: {
    fnn() {
      this.flag = true
      this.form.departmentName = ''
      this.form.bed_number = ''
      this.form.admission_date = this.formattedCurrentTime

    },
    getFormattedCurrentTime() {
      const now = new Date();

      // 获取年月日时分秒
      const year = now.getFullYear();
      const month = (now.getMonth() + 1).toString().padStart(2, '0');
      const day = now.getDate().toString().padStart(2, '0');
      const hours = now.getHours().toString().padStart(2, '0');
      const minutes = now.getMinutes().toString().padStart(2, '0');
      const seconds = now.getSeconds().toString().padStart(2, '0');

      // 格式化为 MySQL 的日期类型字符串
      this.formattedCurrentTime = now.toISOString().slice(0, 19).replace('T', ' ');

    },
    fetchDepartmentOptions() {
      getDepartmentListAPI({
        page: 1,
        pageSize: 100
      }).then((res) => {
        this.departmentOptions = res.data.rows
      })
    },
    fn(row) {
      let Time = row.admission_date
      return Time.split('-')[0] + '-' + Time.split('-')[1] + '-' + Time.split('-')[2].split('T')[0]
    },
    fn2(row) {
      return row.flag === 1 ? '已结算' : '未结算'
    },

    //显示数据
    getList() {
      getPatientListAPI(this.params).then((res) => {
        console.log("res")
        console.log(res)
        //展示在在页面
        this.list = res.data.rows
        this.total = res.data.total
        this.form.patientName = res.data.rows[0].patientName
      })
    },
    handleSizeChange(pageSize) {
      // 每页条数变化
      this.params.pageSize = pageSize
      this.params.page = 1
      this.getList()

    },
    handleCurrentChange(page) {
      // 页码变化
      this.params.page = page
      this.getList()

    },
    handleClose() {
      this.flag = false,
        this.form.departmentName = ''
      this.form.bed_number = ''
      this.form.admission_date = this.formattedCurrentTime
      this.getList()

    },
    confirm() {

      addPatientAPI(this.form).then(() => {
        // 提示
        this.$message.success('添加成功')
        this.flag = false
        this.getList()
        this.form.departmentName = ''
        this.form.bed_number = ''
        this.form.admission_date = this.formattedCurrentTime
      }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.btn {
  margin: 20px;
}

.box {
  //浮动
  float: right;
  //flex弹性容器布局
  // display: flex;
  // //默认是从左往右       从右往左
  // justify-content: flex-end;

  margin-top: 10px;
  margin-right: 20px;
}

.department-container {
  padding: 10px;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  ;
  padding-bottom: 20px;

  .search-label {
    width: 100px;
  }

  .search-main {
    width: 220px;
    margin-right: 30px;
  }
}
</style>@/api/doctorWay